<template>
  <van-cell
    title="仓库"
    is-link
    url="https://gitee.com/zwz031228/pinia.git"
  />
  <form action="/">
    <van-search
      v-model="value"
      show-action
      placeholder="请输入搜索关键词"
      @search="onSearch"
      @cancel="onCancel"
    />
  </form>
  <van-dropdown-menu>
    <van-dropdown-item
      v-model="value1"
      :options="option1"
    />
    <van-dropdown-item
      v-model="value2"
      :options="option2"
    />
  </van-dropdown-menu>
  <van-collapse v-model="activeNames">
    <van-collapse-item
      title="学生"
      name="1"
    >
      浏览作品
      <a
        href="#"
        style=" float: right;color:red; "
      >打开/下载</a>
    </van-collapse-item>
    <van-collapse-item
      title="学生"
      name="2"
    >
      浏览作品
      <a
        href="#"
        style=" float: right;color:red; "
      >打开/下载</a>
    </van-collapse-item><van-collapse-item
      title="学生"
      name="3"
    >
      浏览作品
      <a
        href="#"
        style=" float: right;color:red; "
      >打开/下载</a>
    </van-collapse-item>
    <van-collapse-item
      title="学生"
      name="4"
    >
      浏览作品
      <a
        href="#"
        style=" float: right;color:red; "
      >打开/下载</a>
    </van-collapse-item>
    <van-collapse-item
      title="学生"
      name="5"
    >
      浏览作品
      <a
        href="#"
        style=" float: right;color:red; "
      >打开/下载</a>
    </van-collapse-item>
    <van-collapse-item
      title="学生"
      name="6"
    >
      浏览作品
      <a
        href="#"
        style=" float: right;color:red; "
      >打开/下载</a>
    </van-collapse-item>
    <van-collapse-item
      title="学生"
      name="7"
    >
      浏览作品
      <a
        href="#"
        style=" float: right;color:red; "
      >打开/下载</a>
    </van-collapse-item>
    <van-collapse-item
      title="学生"
      name="8"
    >
      浏览作品
      <a
        href="#"
        style=" float: right;color:red; "
      >打开/下载</a>
    </van-collapse-item>
    <van-collapse-item
      title="学生"
      name="9"
    >
      浏览作品
      <a
        href="#"
        style=" float: right;color:red; "
      >打开/下载</a>
    </van-collapse-item>
    <van-collapse-item
      title="学生"
      name="10"
    >
      浏览作品
      <a
        href="#"
        style=" float: right;color:red; "
      >打开/下载</a>
    </van-collapse-item>
    <van-collapse-item
      title="学生"
      name="11"
    >
      浏览作品
      <a
        href="#"
        style=" float: right;color:red; "
      >打开/下载</a>
    </van-collapse-item>
    <van-collapse-item
      title="学生"
      name="12"
    >
      浏览作品
      <a
        href="#"
        style=" float: right;color:red; "
      >打开/下载</a>
    </van-collapse-item>
  </van-collapse>

</template>

<script>
import { ref } from "vue";
import { showToast } from "vant";

export default {
  setup() {
    const value = ref("");
    const onSearch = (val) => showToast(val);
    const onCancel = () => showToast("取消");
    const value1 = ref(0);
    const value2 = ref("a");
    const activeNames = ref(["1"]);

    const option1 = [
      { text: "前端框架应用项目开发", value: 0 },
      { text: "Vue3开发初体验", value: 1 },
      { text: "Vue3组件化开发", value: 2 },
      { text: "Vue3路由的使用", value: 3 },
      { text: "电影列表项目", value: 4 },
      { text: "Vue自动化测试", value: 5 },
    ];
    const option2 = [
      { text: "选择班级", value: "a" },
      { text: "22软件3班", value: "b" },
      { text: "22软件1班", value: "c" },
    ];
    return {
      value,
      onSearch,
      onCancel,
      value1,
      value2,
      option1,
      option2,
      activeNames,
    };
  },
};
</script>